<template>
  <div class="fc-style">
    <a-layout class="fc-container">
      <a-layout-content class="fc-main">
        <a-layout>
          <a-layout-sider theme="light" :width="250">
            <div class="components">
              <ComponentGroup
                title="基础字段"
                :fields="basicFields"
                :list="antd.basicComponents"
                :widgetFormRef="widgetFormRef"
                :widgetForm="widgetForm"
              />
            </div>
          </a-layout-sider>
          <a-layout class="center-container">
            <a-layout-content :class="{ 'widget-empty': widgetForm.list }">
              <AntdWidgetForm
                ref="widgetFormRef"
                :widgetFormRef="'showLayout'"
                v-model:widgetForm="widgetForm"
                v-model:widgetFormSelect="widgetFormSelect"
              />
            </a-layout-content>
          </a-layout>
          <a-layout-sider theme="light" class="widget-config-container" :width="180">
            <a-layout>
              <a-layout-content class="opera-container">
                <div class="oprea-btn">
                  <a-button size="small" @click="() => (previewVisible = true)"> 预览 </a-button>
                  <a-button size="small"> 生成json </a-button>
                </div>
              </a-layout-content>
            </a-layout>
          </a-layout-sider>
          <!-- 查看布局 -->
          <a-modal v-model:visible="previewVisible" :width="800" title="预览" :maskClosable="false">
            <AntdWidgetForm
              style="margin-top: 20px"
              ref="generateFormRef"
              v-model:widgetForm="widgetForm"
              v-model:widgetFormSelect="widgetFormSelect"
              :widgetFormRef="'preview'"
            />
          </a-modal>
        </a-layout>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, PropType, toRefs, ref } from 'vue';
  import ComponentGroup from '../components/ComponentGroup.vue';
  import AntdWidgetForm from './AntdWidgetForm.vue';
  import SvgIcon from '../components/SvgIcon.vue';
  import { antd } from '../config';

  export default defineComponent({
    name: 'AntdDesignForm',
    components: {
      ComponentGroup,
      AntdWidgetForm,
      SvgIcon,
    },
    props: {
      preview: {
        type: Boolean,
        default: true,
      },
      basicFields: {
        type: Array as PropType<Array<string>>,
        default: () => [
          'input',
          'password',
          'textarea',
          'number',
          'radio',
          'checkbox',
          'time',
          'date',
          'rate',
          'select',
          'switch',
          'slider',
          'text',
        ],
      },
    },
    setup() {
      const widgetFormRef = ref();
      const state = reactive({
        antd,
        widgetForm: JSON.parse(JSON.stringify(antd.widgetForm)),
        widgetFormSelect: undefined,
        previewVisible: false,
      });

      return {
        ...toRefs(state),
        widgetFormRef,
      };
    },
  });
</script>

<style scoped>
  .opera-container {
    background-color: #fff;
    text-align: center;
  }

  .oprea-btn {
    text-align: center;
  }

  .oprea-btn .ant-btn {
    display: block;
    margin-left: 30px;
    margin-top: 10px;
  }

  .oprea-btn .ant-btn .svg-icon {
    margin-right: 5px;
    display: inline-block;
  }
</style>
